// 第一题

// 渲染成table
let data = [
  {
    id: 1,
    name: 'iphone 15',
    price: 5999,
  },
  {
    id: 2,
    name: 'iphone 15 Pro',
    price: 8999,
  },
  {
    id: 3,
    name: 'iphone 15 Pro Max',
    price: 9999,
  },
];
let box = document.querySelector('.box');
let btn = document.querySelector('button');

let newTable = document.createElement('table');
let newThead = document.createElement('thead');
let newTbody = document.createElement('tbody');
let newTr = document.createElement('tr');
let headers = [];
btn.onclick = function () {
  if (headers.length > 0) {
    return;
  } else {
    box.append(newTable);
    headers = Object.keys(data[0]);
    // console.log("headers", headers);

    headers.forEach((headerText) => {
      let newHeader = document.createElement('th');
      newHeader.textContent = headerText;
      newTr.appendChild(newHeader);
    });
    newThead.appendChild(newTr);
    newTable.appendChild(newThead);

    data.forEach((item) => {
      let newTr = document.createElement('tr');
      headers.forEach((header) => {
        let newTd = document.createElement('td');
        newTd.textContent = item[header];
        newTr.appendChild(newTd);
      });
      newTbody.appendChild(newTr);
    });
    newTable.appendChild(newTbody);
    box.innerHTML = '';
    box.appendChild(newTable);
  }
};

// 第二题

let allSport = document.querySelectorAll('.sport');
let all = document.getElementById('all');

function allclick() {
  for (let i = 0; i < allSport.length; i++) {
    allSport[i].checked = all.checked;
  }
}

function checkAll() {
  let allChecked = true;
  for (let i = 0; i < allSport.length; i++) {
    if (!allSport[i].checked) {
      allChecked = false;
      break;
    }
  }
  all.checked = allChecked;
}
function selectAll() {
  for (let i = 0; i < allSport.length; i++) {
    allSport[i].checked = true;
  }
  all.checked = true;
}

function unselectAll() {
  for (let i = 0; i < allSport.length; i++) {
    allSport[i].checked = false;
  }
  all.checked = false;
}

function toggleSelection() {
  for (let i = 0; i < allSport.length; i++) {
    allSport[i].checked = !allSport[i].checked;
  }
  checkAll();
}

function submit() {
  for (var i = 0; i < allSport.length; i++) {
    if (allSport[i].checked == true) {
      console.log(allSport[i]);
    }
  }
}

//第三题

function createGz() {
  let ul = document.querySelector('ul');
  let li = document.querySelectorAll('li');
  let gzExists = false;
  for (var i = 0; i < li.length; i++) {
    if (li[i].innerText === '广州') {
      gzExists = true;
      break;
    }
  }
  if (!gzExists) {
    let newGz = document.createElement('li');
    newGz.appendChild(document.createTextNode('广州'));
    ul.appendChild(newGz);
  }
}

function insertGzBeforeBj() {
  let ul = document.querySelector('ul');
  let li = document.querySelectorAll('li');
  let gzNode = null;
  for (var i = 0; i < li.length; i++) {
    if (li[i].innerText === '广州') {
      gzNode = li[i];
      break;
    }
  }
  if (gzNode) {
    ul.insertBefore(gzNode, li[0]);
  } else {
    let newGz = document.createElement('li');
    newGz.appendChild(document.createTextNode('广州'));
    ul.insertBefore(newGz, li[0]);
  }
}

function replaceGzToBj() {
  let ul = document.querySelector('ul');
  let li = document.querySelectorAll('li');
  for (let i = 0; i < li.length; i++) {
    if (li[i].innerText === '北京') {
      let newGz = document.createElement('li');
      newGz.appendChild(document.createTextNode('广州'));
      ul.replaceChild(newGz, li[i]);
      break;
    }
  }
}

function deleteGz() {
  let li = document.querySelectorAll('li');
  for (let i = 0; i < li.length; i++) {
    if (li[i].innerText === '广州') li[i].remove();
  }
}
function readCityList() {
  let li = document.querySelectorAll('li');
  console.log('当前城市列表结构:');
  li.forEach((item) => {
    console.log(item.innerText);
  });
}
function readBj() {}
